import dayjs from 'dayjs';
import {useEffect, useState} from "react";
import './index.scss';

const ZHOU = [
    '星期日',
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六',
];

const TopHeader = () => {
    const [s, setS] = useState('');
    const [day, setDay] = useState('');
    const [zhou, setZhou] = useState('');

    useEffect(() => {
        setInterval(() => {
            const date = dayjs();
            const sound = date.format('HH:mm:ss');
            const day = date.format('YYYY年M月D日');
            const time = date.day();
            setZhou(ZHOU[time]);
            setS(sound);
            setDay(day);
        }, 1000);
        return () => {};
    }, []);

  return (
      <div className='top-header-container flex-row-end'>
        <div className='top-header-title'>财信数据资产驾驶舱</div>
          <div className='top-header-time flex-row-center' style={{justifyContent: 'space-between'}}>
              <div className='top-header-time-text'>{day}</div>
              <div className='top-header-time-text'>{s}</div>
              <div className='top-header-time-text'>{zhou}</div>
          </div>
      </div>
  )
}

export default TopHeader;
